<?php
	//El tema es la clasificaciÃ³n por la que vamos a separar el grÃ¡fico. Por ejemplo, horas del dÃ­a.
	function grafica_tarta_google($contenedor, $titulo, $tema, $datos)
   {
		echo "<script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>
		<script type=\"text/javascript\">
		  google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});
		  google.setOnLoadCallback(drawChart);
		  function drawChart() {
			var data = google.visualization.arrayToDataTable([
			  ['Task', '" . $tema . "'],";
			  $salida = "";
			  foreach($datos as $clave => $valor)
			  {
			     $salida .= "['" . $clave . "', " . $valor["Valor"] . "],";
			  }
			  substr($salida, 0, -1);
			  echo $salida . "
			]);

			var options = {
			  title: '" . $titulo . "',
			  backgroundColor: '#F5F5F5',
			  is3D: true,
			};

			var chart = new google.visualization.PieChart(document.getElementById('" . $contenedor . "'));
			chart.draw(data, options);
		  }
		</script>
		</div>";
	}
	
	function grafica_barras_basica_vertical($contenedor, $titulo, $datos,$tamano_barras,$offset)
	{
		
		echo "<script>(function basic_bars(" . $contenedor . ") {

		  var
			container = document.getElementById('" . $contenedor . "');
			";

			foreach($datos as $indice => $valor)
			{
				echo "d" . $indice . " = [],";
			}
			
			echo "point=null;                                   // Data point variable declaration
			";

		for($i=0; $i<count($datos[0]);$i++)
		{
			foreach($datos as $indice => $dato)
			{
				echo "point = [" . $i . " + " . $offset . " * " . $indice . "," . $dato[$i] . "]
				";
				echo "d" . $indice . ".push(point);
				";
			}
		}
		
		echo "

		// Draw the graph
		  Flotr.draw(
			container,[";
			$salida = " ";
			foreach($datos as $indice => $valor)
			{
				$salida .= "d" . $indice . ",";
			}
			echo substr($salida, 0, -1);
			echo "],
			{
			  bars : {
				show : true,
				horizontal : false,
				shadowSize : 0,
				barWidth : " . $tamano_barras . "
			  },
			  mouse : {
				track : true,
				relative : true
			  },
			  yaxis : {
				min : 0,
				autoscaleMargin : 1
			  },
			  title : '" . $titulo . "',
			}
		  );
		})(document.getElementById('editor-render-0'));</script>";
	}
	
   function grafica_lineal_time_zoom($contenedor, $titulo, $fechaini, $fechafin, $datos, $nombre_funciones, $titulo_axis)
	{
		echo "<script>(function basic_time(" . $contenedor . ") {
		  var
		    container = document.getElementById('" . $contenedor . "');
		    start = new Date('" . $fechaini . " " . "01:00').getTime(),
		    options = null,
		    graph = null,
            o=null,
          ";

		foreach($datos as $indice => $valor)
		{
			echo "d" . $indice . " = [],";
		}

		echo "options = null,
		graph = null,";

		foreach($datos as $indice => $dato)
		{
			foreach($dato as $clave => $valor)
			{
				echo "point = [new Date('" . $valor["Fecha"] . "').getTime(), " . $valor["Valor"] . "]
				";
				echo "d" . $indice . ".push(point);
				";
			}
		}
	

		echo "options = {
		          xaxis : {
					mode : 'time',
					labelsAngle : 45,
					max : new Date('" .$fechafin . " " . "01:00').getTime(),
					noTicks : 6,
					autoscale: false,
					showMinorLabels: true,
					title : '" . $titulo_axis . "',
		          },
				  yaxis : {
					min: 0
				  },

		          grid: {
		           verticalLines: true,
		           minorVerticalLines: true,

                  },
				  

			      selection : { mode : 'x', fps : 30 },
			      title : '" . $titulo . "',
				  subtitle : '" . $fechaini . " - " . $fechafin . "'
		  };

		  // Draw graph with default options, overwriting with passed options
		  function drawGraph (opts) {

		  // Clone the options, so the 'options' variable always keeps intact.
			var o = Flotr._.extend(Flotr._.clone(options), opts || {});

		 // Return a new graph.
			return Flotr.draw(
			  container,
			  [";


				$salida = "";
				foreach($datos as $indice => $dato)
				{
					$salida .= "{data: d" . $indice . ", label: '" . $nombre_funciones[$indice] . "'},";
				}
				echo substr($salida,0,-1);
				echo "],
			  o
			);
		  }

		  // Actually draw the graph.
		  graph = drawGraph();

		  // Hook into the 'flotr:select' event.
		  Flotr.EventAdapter.observe(container, 'flotr:select', function (area) {

			// Draw graph with new area
			graph = drawGraph({
			  xaxis: {mode:'time',format:\"%d/%m/%y\",min:area.x1, max:area.x2},
			  yaxis: {min:area.y1, max:area.y2}
			});
		  });

		  // When graph is clicked, draw the graph with default area.
		  Flotr.EventAdapter.observe(container, 'flotr:click', function () { drawGraph(); });
		})(document.getElementById(\"editor-render-0\"));</script>";
	}
	
	function grafica_lineal_zoom($contenedor, $titulo, $datos, $nombre_funciones)
	{
		echo "<script>(function mouse_zoom(" . $contenedor . ") {

		  var
		  container = document.getElementById('" . $contenedor . "');
		  ";
		foreach($datos as $indice => $valor)
		{
			echo "d" . $indice . " = [],";
		}
		echo "options = null,
			graph = null,";
		for($i=0; $i<count($datos[0]);$i++)
		{
			foreach($datos as $indice => $dato)
			{
				echo "point = [" . $i . ", " . $dato[$i] . "]
				";
				echo "d" . $indice . ".push(point);
				";
			}
		}
		
			  
		echo "options = {
			selection : { mode : 'x', fps : 30 },
			title : '" . $titulo . "'
		  };
			
		  // Draw graph with default options, overwriting with passed options
		  function drawGraph (opts) {

			// Clone the options, so the 'options' variable always keeps intact.
			var o = Flotr._.extend(Flotr._.clone(options), opts || {});

			// Return a new graph.
			return Flotr.draw(
			  container,
			  [";
				$salida = "";
				foreach($datos as $indice => $dato)
				{
					$salida .= "{data: d" . $indice . ", label: '" . $nombre_funciones[$indice] . "'},"; 
				}
				echo substr($salida,0,-1);
				echo "],
			  o
			);
		  }

		  // Actually draw the graph.
		  graph = drawGraph();      
			
		  // Hook into the 'flotr:select' event.
		  Flotr.EventAdapter.observe(container, 'flotr:select', function (area) {

			// Draw graph with new area
			graph = drawGraph({
			  xaxis: {mode:time,format:\"%m/%d/%y\",min:area.x1, max:area.x2},
			  yaxis: {min:area.y1, max:area.y2}
			});
		  });
			
		  // When graph is clicked, draw the graph with default area.
		  Flotr.EventAdapter.observe(container, 'flotr:click', function () { drawGraph(); });
		})(document.getElementById(\"editor-render-0\"));</script>";
	}
	
	
	function grafica_radar($contenedor, $datos, $categorias, $nombre_atributo, $maxYAxis)
	{
		$salida = "<script>
		(function basic_radar(" . $contenedor . ") {

			
			var
			";
			$i = 0;
			foreach($datos as $clave => $dato)
			{
				$salida .= "s" . $i . " = { label: '" . $nombre_atributo[$i] . "', data: [";
				foreach($dato as $clave => $valor)
				{
					$salida .= "[" . $clave . ", " . $valor . "],";
				}
				$salida = substr($salida,0,-1);
				$salida .= "] },
				";
				$i++;
			}
			$salida .= "graph =null, ticks=0, container=document.getElementById('" . $contenedor . "');

			// Radar Labels
			ticks = [";
			$i = 0;
			foreach($categorias as $categoria)
			{
				$salida .= "[" . $i . ", '" . $categoria . "'],";
				$i++;
			}
			$salida = substr($salida,0,-1) . 
			"];
			
			// Draw the graph.
			graph = Flotr.draw(container, [";
			for($i=0;$i<count($datos);$i++)
			{
				$salida .= "s" . $i . ",";
			}
			$salida = substr($salida,0,-1);
			$salida .= "], {
				radar : { show : true}, 
				grid  : { circular : true, minorHorizontalLines : true}, 
				yaxis : { min : 0, max : " . $maxYAxis . ", minorTickFreq : 2}, 
				xaxis : { ticks : ticks}
			});
		})(document.getElementById(\"editor-render-0\"))</script>
		";
		echo $salida;
	}
	
   
   

   //D3 charts
   function json($datos, $nombre_funciones)
	{
		//Declaramos las variables
		$json = "[
";
		$json_end = "  
";
		
		$json_path = "json\\";
		$json_file = "data.json";
		$rout = $json_path . $json_file;

		
      //Rellenamos el fichero con los datos
		//for($i=0; $i<count($datos); $i++)
		foreach($datos as $i => $dato)
      {
            
         $json .= "{
            \"key\": \"" . $nombre_funciones[$i] . "\",
            \"values\": [";
         
         foreach($dato as $valores)
         {
            $json .= "[" . strtotime($valores["Fecha"]) * 1000 . "," . $valores["Valor"] . "],";
         }
         $json = substr($json,0,-1);
         $json .= "]
},";
      }
      $json = substr($json,0,-1);
      $json .= "]
";
      
		//Generamos el json con todos los datos  
		if (!$handle = fopen($rout, "w")) {  
			echo "Cannot open file";  
			exit;  
		}  
		if (fwrite($handle,$json) === FALSE) {  
			echo "Cannot write to file";  
			exit;  
		}  
		fclose($handle);
	}
   
	//Esta funciÃ³n recibe como parÃ¡metros los campos que se van a rellenar ($campos) y la lista de tuplas con los valores ($atributos)
   //y genera un fichero .csv en la carpeta csv del proyecto con un identificador Ãºnico por cada usuario. En caso de que ya existiera
   //un fichero con dicho identificador, lo machacarÃ¡ y escribirÃ¡ encima
   function csv($campos, $empresa,$indice)
	{
		//Declaramos las variables
		$csv = "";
		$csv_end = "  
";
		$csv_sep = ",";
		$csv_path = "csv\\";
		$csv_file = "data" . $indice . ".csv";
		$rout = $csv_path . $csv_file;

		//Establecemos los campos del fichero csv
		foreach($campos as $campo)
		{
			$csv .= $campo . ",";
		}
		$csv = substr($csv,0,-1) . "
";
      //Rellenamos el fichero con los datos
		foreach($empresa as $datos)
		{
         foreach($datos as $dato)
         {
            $csv .= $dato . $csv_sep;
         }
         $csv = substr($csv,0,-1);
         $csv .= $csv_end;
      }
		//Generamos el csv con todos los datos  
		if (!$handle = fopen($rout, "w")) {  
			echo "Cannot open file";  
			exit;  
		}  
		if (fwrite($handle, utf8_decode($csv)) === FALSE) {  
			echo "Cannot write to file";  
			exit;  
		}  
		fclose($handle);
	}
   
 
   //FunciÃ³n que dibuja una doble grÃ¡fica en funciÃ³n del tiempo y que permite, por medio de la grÃ¡fica inferior, ajustar la ventana temporal
   //$ancho y $alto1 son las dimensiones del gráfico superior (es el que mostrará los datos)
   //$ancho y $alto2 son las dimensiones del gráfico inferior (muestra datos pero sirven para marcar la ventana, deberÃ¡ tener un alto mucho
   //mÃ¡s bajo)
   //Tanto $margin1 como $margin2 son arrays asociativos que contienen los mÃ¡rgenes de cada grÃ¡fica
   //nuevo           
   
    function grafica_d3_double_timeline($contenedor, $ancho, $alto)
   {
       echo "     
               
               <script src=\"js/d3/d3.v2.js\"></script>
               <script src=\"js/d3/nvd3/lib/fisheye.js\"></script>
               <script src=\"js/d3/nvd3/nv.d3.js\"></script>";

      echo "<div class=\"grafica\" id=\"" . $contenedor . "\"><svg></svg></div>     

   <script>
         d3.json('json/data.json', function(data) {
            nv.addGraph(function() {
               var chart = nv.models.lineWithFocusChart()
                          .x(function(d) { return d[0]; })
                          .y(function(d) { return d[1]; }) 
                          .color(d3.scale.category10().range());
                  chart.xAxis
                     .tickFormat(function(d) {
                     return d3.time.format('%d/%m/%Y')(new Date(d));
                   });
                  chart.x2Axis
                     .tickFormat(function(d) {
                     return d3.time.format('%d/%m/%Y')(new Date(d));
                  });
                  chart.yAxis
                     .tickFormat(d3.format(',.1'));
                  chart.y2Axis
                     .tickFormat(d3.format(',.1'));

               d3.select('#" . $contenedor . " svg')
                   .datum(data)
                   .transition().duration(800)
                   .call(chart);
               nv.utils.windowResize(chart.update);
               return chart;
            });
         });
         </script>
         ";

   }         
   
   
            
   function grafica_d3_double_timeline_area($ancho, $alto1, $alto2, $margin1, $margin2)
   {
      echo "
      <style>
            svg {
                font: 10px sans-serif;
            }

            path {
                fill: steelblue;
            }

            .axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }
            


            .brush .extent {
               stroke: #fff;
               fill-opacity: .125;
               shape-rendering: crispEdges;
            }
      </style>
      <script src=\"js\d3\d3.min.js\"></script>
      <script>
        //margen del grÃ¡fico superior
         var margin = {top: " . $margin1["top"] . ", right: " . $margin1["right"] . ", bottom: " . $margin1["bottom"] . ", left: " . $margin1["left"] . "},
        //margen del grÃ¡fico inferior
         margin2 = {top: " . $margin2["top"] . ", right: " . $margin2["right"] . ", bottom: " . $margin2["bottom"] . ", left: " . $margin2["left"] . "},
        //anchura de ambos grÃ¡ficos
         width = " . $ancho . " - margin.left - margin.right,
        //alturas superior y alturas del grÃ¡fico inferior
         height = " . $alto1 . " - margin.top - margin.bottom,
         height2 = " . $alto2 . " - margin2.top - margin2.bottom;

        //formato de fecha
         var parseDate = d3.time.format(\"%Y/%m/%d\").parse;

        //lÃ­mites ancho + alto del grÃ¡fico para los datos
         var x  = d3.time.scale().range([0, width]),
             x2 = d3.time.scale().range([0, width]),
             y  = d3.scale.linear().range([height, 0]),
             y2 = d3.scale.linear().range([height2, 0]);

        // Caracteristicas de los ejes. La orientaciÃ³n se refiere Ãºnicamente al texto que hay debajo del eje, por si
        // queremos que aparezca arriba o abajo. Si ponemos arriba, los meses escritos se mezclarÃƒÂ¡n con la grÃ¡fica.
        // Idem para el eje y con izquierda y derecha
         var xAxis = d3.svg.axis().scale(x).orient(\"bottom\"),
             xAxis2 = d3.svg.axis().scale(x2).orient(\"bottom\"),
             yAxis = d3.svg.axis().scale(y).orient(\"left\");
    
         var brush = d3.svg.brush()
            .x(x2)
            .on(\"brush\", brushed);

        //generamos un Ã¡rea
         var area = d3.svg.area()
            .interpolate(\"monotone\")
            .x(function(d) { return x(d.Fecha); })
            .y0(height)
            .y1(function(d) { return y(d.Valor); });

         var area2 = d3.svg.area()
            .interpolate(\"monotone\")
            .x(function(d) { return x2(d.Fecha); })
            .y0(height2)
            .y1(function(d) { return y2(d.Valor); });

        //Introducimos el svg dentro del cuerpo del fichero html
         var svg = d3.select(\"body\").append(\"svg\")
            .attr(\"width\", width + margin.left + margin.right)
            .attr(\"height\", height + margin.top + margin.bottom);

        //
         svg.append(\"defs\").append(\"clipPath\")
            .attr(\"id\", \"clip\")
            .append(\"rect\")
            .attr(\"width\", width)
            .attr(\"height\", height);

         var focus = svg.append(\"g\")
            .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");

         var context = svg.append(\"g\")
            .attr(\"transform\", \"translate(\" + margin2.left + \",\" + margin2.top + \")\");


         d3.csv(\"csv/datas.csv\", function(error, data) {
            data.forEach(function(d) {
               d.Empresa =+ d.Empresa;
               d.Fecha = parseDate(d.Fecha);
               d.Valor =+ d.Valor;
               alert(d.Fecha);
            });

         x.domain(d3.extent(data.map(function(d) { return d.Fecha; })));
         y.domain([0, d3.max(data.map(function(d) { return d.Valor; }))]);
         x2.domain(x.domain());
         y2.domain(y.domain());

         focus.append(\"path\")
                .datum(data)
                .attr(\"clip-path\", \"url(#clip)\")
                .attr(\"d\", area);

         focus.append(\"g\")
                .attr(\"class\", \"x axis\")
                .attr(\"transform\", \"translate(0,\" + height + \")\")
                .call(xAxis);

         focus.append(\"g\")
                .attr(\"class\", \"y axis\")
                .call(yAxis);

         context.append(\"path\")
                .datum(data)
                .attr(\"d\", area2);

         context.append(\"g\")
                .attr(\"class\", \"x axis\")
                .attr(\"transform\", \"translate(0,\" + height2 + \")\")
                .call(xAxis2);

         context.append(\"g\")
                .attr(\"class\", \"x brush\")
                .call(brush)
                .selectAll(\"rect\")
                .attr(\"y\", -6)
                .attr(\"height\", height2 + 7);
      });
	
      function brushed() {
          x.domain(brush.empty() ? x2.domain() : brush.extent());
          focus.select(\"path\").attr(\"d\", area);
          focus.select(\".x.axis\").call(xAxis);
      }

      </script>";
   }
?>